<HTML>

<HEAD>
        <META NAME="keywords" CONTENT="electronic commerce, ecommerce, ebusiness, e-business, e-commerce, enterprise software, net economy, Netscape, Sun Microsystems, Sun-Netscape Alliance, iPlanet, internet software">
        <META NAME="description" CONTENT="The Sun-Netscape Alliance, a strategic alliance formed by America Online and Sun Microsystems, Inc., is delivering iPlanet e-commerce software and enterprise solutions that enable companies to compete successfully in the Net Economy">
	<META HTTP-EQUIV="Content-Type" content="text/html; charset=ISO-8859-1">
	<META NAME="TEMPLATEBASE" CONTENT="Authored in FrameMaker. Converted to HTML in WebWorks Publisher 2000. manual wdt 1.5">
	<META NAME="LASTUPDATED" CONTENT="09/28/00 13:18:04">
	<TITLE> Core JavaScript Guide 1.5: 8 Details of the Object Model</TITLE>
</HEAD>




<BODY TEXT="#000000" LINK="#666699" VLINK="#666699" ALINK="#333366" BGCOLOR="#FFFFFF">

<MAINCONTENT>

<NAVIGATIONCONTENT>
   <TABLE WIDTH="100%" BORDER="0" CELLSPACING="4">
      <TR>
         <TD VALIGN="TOP">
            <b><a href="obj.html">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">Previous</a></FONT>&nbsp;&nbsp;&nbsp;&nbsp;</b>
<a href="contents.html">
<b><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">Contents</a></FONT></b>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="ix.html"><b><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">Index</a></FONT></b>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="partlc.html">
<b>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">
Next
</a>
</FONT>
</b>&nbsp;&nbsp;&nbsp;&nbsp;
         </TD>
     </TR>

      <TR>
         <TD VALIGN="TOP" ALIGN="RIGHT" BGCOLOR="#CCCCCC">
            <FONT FACE="Arial, Helvetica, sans-serif" COLOR="#000000" SIZE="2"><B>
             Core JavaScript Guide 1.5</B></FONT>
         </TD>
      </TR>
      <TR>
   </TABLE>
   <BR>
</NAVIGATIONCONTENT>

<BOOKCONTENT>
   <blockquote>
<BR>
<BR>

      <A NAME="1013801"> </A><A NAME=""> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="4" COLOR="#666666"><B>
<zchapnumber>Chapter 8 </zchapnumber>
&nbsp;
</B>
</FONT>


<A NAME="1013803"> </A>
<A NAME="Details of the Object Model"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4" COLOR="#000000">
<B>
<zchaptitle>Details of the Object Model</zchaptitle>
</B>
</FONT>
<BR>
<BR>
<BR>

<A NAME="1013805"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>JavaScript is an object-based language based on prototypes, rather than being class-based. Because of this different basis, it can be less apparent how JavaScript allows you to create hierarchies of objects and to have inheritance of properties and their values. This chapter attempts to clarify the situation.</zparagraph>
</FONT>
<P>

<A NAME="1008313"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>This chapter assumes that you are already somewhat familiar with JavaScript and that you have used JavaScript functions to create simple objects.</zparagraph>
</FONT>
<P>

<A NAME="1010311"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>This chapter contains the following sections:</zparagraph>
</FONT>
<P>
<ul>
<A NAME="1010312"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><A HREF="obj2.html#1008342"  >Class-Based vs. Prototype-Based Languages</A></zsmartlist1>
</FONT>
<P><A NAME="1008329"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><A HREF="obj2.html#1008388"  >The Employee Example</A></zsmartlist1>
</FONT>
<P><A NAME="1011320"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><A HREF="obj2.html#1008404"  >Creating the Hierarchy</A></zsmartlist1>
</FONT>
<P><A NAME="1008333"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><A HREF="obj2.html#1008465"  >Object Properties</A></zsmartlist1>
</FONT>
<P><A NAME="1008337"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><A HREF="obj2.html#1008499"  >More Flexible Constructors</A></zsmartlist1>
</FONT>
<P><A NAME="1008341"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><A HREF="obj2.html#1008567"  >Property Inheritance Revisited</A></zsmartlist1>
</FONT>
<P></ul>

<BR>
<BR>

<A NAME="1008342"> </A>
<A NAME="Class-Based vs. Prototype-Based Languages"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead1>Class-Based vs. Prototype-Based Languages</zhead1>
<HR SIZE="2" NOSHADE>
</FONT>
<BR>


<A NAME="1011288"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Class-based object-oriented languages, such as Java and C++, are founded on the concept of two distinct entities: classes and instances.</zparagraph>
</FONT>
<P>
<ul>
<A NAME="1010952"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1>A <I>class</I> defines all of the properties (considering methods and fields in Java, or members in C++, to be properties) that characterize a certain set of objects. A class is an abstract thing, rather than any particular member of the set of objects it describes. For example, the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> class could represent the set of all employees.</zsmartlist1>
</FONT>
<P><A NAME="1010959"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1>An <I>instance</I>, on the other hand, is the instantiation of a class; that is, one of its members. For example, <FONT FACE="courier, couriernew, monospaced size">Victoria</FONT> could be an instance of the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> class, representing a particular individual as an employee. An instance has exactly the properties of its parent class (no more, no less).</zsmartlist1>
</FONT>
<P></ul>

<A NAME="1010590"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>A prototype-based language, such as JavaScript, does not make this distinction: it simply has objects. A prototype-based language has the notion of a <I>prototypical object</I>, an object used as a template from which to get the initial properties for a new object. Any object can specify its own properties, either when you create it or at run time. In addition, any object can be associated as the <I>prototype</I> for another object, allowing the second object to share the first object's properties.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1011360"> </A>
<A NAME="Defining a Class"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Defining a Class</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1010591"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>In class-based languages, you define a class in a separate <I>class definition</I>. In that definition you can specify special methods, called <I>constructors</I>, to create instances of the class. A constructor method can specify initial values for the instance's properties and perform other processing appropriate at creation time. You use the <FONT FACE="courier, couriernew, monospaced size">new</FONT> operator in association with the constructor method to create class instances.</zparagraph>
</FONT>
<P>

<A NAME="1008345"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>JavaScript follows a similar model, but does not have a class definition separate from the constructor. Instead, you define a constructor function to create objects with a particular initial set of properties and values. Any JavaScript function can be used as a constructor. You use the <FONT FACE="courier, couriernew, monospaced size">new</FONT> operator with a constructor function to create a new object.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1011368"> </A>
<A NAME="Subclasses and Inheritance"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Subclasses and Inheritance</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008346"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>In a class-based language, you create a hierarchy of classes through the class definitions. In a class definition, you can specify that the new class is a <I>subclass</I> of an already existing class. The subclass inherits all the properties of the superclass and additionally can add new properties or modify the inherited ones. For example, assume the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> class includes only the <FONT FACE="courier, couriernew, monospaced size">name</FONT> and <FONT FACE="courier, couriernew, monospaced size">dept</FONT> properties, and <FONT FACE="courier, couriernew, monospaced size">Manager</FONT> is a subclass of <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> that adds the <FONT FACE="courier, couriernew, monospaced size">reports</FONT> property. In this case, an instance of the <FONT FACE="courier, couriernew, monospaced size">Manager</FONT> class would have all three properties: <FONT FACE="courier, couriernew, monospaced size">name</FONT>, <FONT FACE="courier, couriernew, monospaced size">dept</FONT>, and <FONT FACE="courier, couriernew, monospaced size">reports</FONT>.</zparagraph>
</FONT>
<P>

<A NAME="1008347"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>JavaScript implements inheritance by allowing you to associate a prototypical object with any constructor function. So, you can create exactly the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>-<FONT FACE="courier, couriernew, monospaced size">Manager</FONT> example, but you use slightly different terminology. First you define the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> constructor function, specifying the <FONT FACE="courier, couriernew, monospaced size">name</FONT> and <FONT FACE="courier, couriernew, monospaced size">dept</FONT> properties. Next, you define the <FONT FACE="courier, couriernew, monospaced size">Manager</FONT> constructor function, specifying the <FONT FACE="courier, couriernew, monospaced size">reports</FONT> property. Finally, you assign a new <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> object as the <FONT FACE="courier, couriernew, monospaced size">prototype</FONT> for the <FONT FACE="courier, couriernew, monospaced size">Manager</FONT> constructor function. Then, when you create a new <FONT FACE="courier, couriernew, monospaced size">Manager</FONT>, it inherits the <FONT FACE="courier, couriernew, monospaced size">name</FONT> and <FONT FACE="courier, couriernew, monospaced size">dept</FONT> properties from the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> object.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1011428"> </A>
<A NAME="Adding and Removing Properties"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Adding and Removing Properties</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008348"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>In class-based languages, you typically create a class at compile time and then you instantiate instances of the class either at compile time or at run time. You cannot change the number or the type of properties of a class after you define the class. In JavaScript, however, at run time you can add or remove properties from any object. If you add a property to an object that is used as the prototype for a set of objects, the objects for which it is the prototype also get the new property.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1011444"> </A>
<A NAME="Summary of Differences"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Summary of Differences</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008352"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The following table gives a short summary of some of these differences. The rest of this chapter describes the details of using JavaScript constructors and prototypes to create an object hierarchy and compares this to how you would do it in Java.</zparagraph>
</FONT>
<P>

<P>
<A NAME="1010209"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<BR>
<P>
<TABLE WIDTH="90%" BORDER="1" CELLPADDING="5" CELLSPACING="0">
  <CAPTION></CAPTION><P><FONT FACE=""><B>
<A NAME="1008356"> </A>
<A NAME="Comparison of class-based (Java) and prototype-based (JavaScript) object systems"> </A>
<ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablecaption>Table 8.1&#32;&nbsp&nbsp Comparison of class-based (Java) and prototype-based (JavaScript) object systems</ztablecaption>
</B>
</FONT>
</B></FONT>
<BR>
<BR>
  <TR BGCOLOR="#CCCCCC" ALIGN=LEFT VALIGN=TOP>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008360"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>Class-based (Java)</ztablehead>
</B>
</FONT>
</TH>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008362"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>Prototype-based (JavaScript)</ztablehead>
</B>
</FONT>
</TH>
  </DIV></TR>
  <TR>
    <TD VALIGN=TOP>
<P>
<A NAME="1008364"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Class and instance are distinct entities.</ztabletext>
</FONT>&nbsp;</TD>
    <TD VALIGN=TOP>
<P>
<A NAME="1008366"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>All objects are instances.</ztabletext>
</FONT>&nbsp;</TD>
  </TR>
  <TR>
    <TD VALIGN=TOP>
<P>
<A NAME="1008368"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Define a class with a class definition; instantiate a class with constructor methods.</ztabletext>
</FONT>&nbsp;</TD>
    <TD VALIGN=TOP>
<P>
<A NAME="1008370"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Define and create a set of objects with constructor functions.</ztabletext>
</FONT>&nbsp;</TD>
  </TR>
  <TR>
    <TD VALIGN=TOP>
<P>
<A NAME="1008372"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Create a single object with the <FONT FACE="courier, couriernew, monospaced size">new</FONT> operator.</ztabletext>
</FONT>&nbsp;</TD>
    <TD VALIGN=TOP>
<P>
<A NAME="1008374"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Same.</ztabletext>
</FONT>&nbsp;</TD>
  </TR>
  <TR>
    <TD VALIGN=TOP>
<P>
<A NAME="1008376"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Construct an object hierarchy by using class definitions to define subclasses of existing classes.</ztabletext>
</FONT>&nbsp;</TD>
    <TD VALIGN=TOP>
<P>
<A NAME="1008378"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.</ztabletext>
</FONT>&nbsp;</TD>
  </TR>
  <TR>
    <TD VALIGN=TOP>
<P>
<A NAME="1008380"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Inherit properties by following the class chain.</ztabletext>
</FONT>&nbsp;</TD>
    <TD VALIGN=TOP>
<P>
<A NAME="1008382"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Inherit properties by following the prototype chain.</ztabletext>
</FONT>&nbsp;</TD>
  </TR>
  <TR>
    <TD VALIGN=TOP>
<P>
<A NAME="1008384"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Class definition specifies <I>all</I> properties of all instances of a class. Cannot add properties dynamically at run time.</ztabletext>
</FONT>&nbsp;</TD>
    <TD VALIGN=TOP>
<P>
<A NAME="1008386"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<ztabletext>Constructor function or prototype specifies an <I>initial set</I> of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects.</ztabletext>
</FONT>&nbsp;</TD>
  </TR>
</TABLE>



<P>
</FONT>
<P>


<BR>
<BR>

<A NAME="1008388"> </A>
<A NAME="The Employee Example"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead1>The Employee Example</zhead1>
<HR SIZE="2" NOSHADE>
</FONT>
<BR>


<A NAME="1008389"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The remainder of this chapter uses the employee hierarchy shown in the following figure.</zparagraph>
</FONT>
<P>

<A NAME="1008397"> </A>
<ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<zfigurecaptionp>Figure 8.1	&nbsp&nbsp A simple object hierarchy<p><img src="/D:/FromSteveR%28js%20docs%29/js15ugsrc/graphics/hier01.gif"></zfigurecaptionp>
</B>
</FONT>
<P>
<A NAME="1011451"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>This example uses the following objects:</zparagraph>
</FONT>
<P>
<ul>
<A NAME="1008398"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><FONT FACE="courier, couriernew, monospaced size">Employee</FONT> has the properties <FONT FACE="courier, couriernew, monospaced size">name</FONT> (whose value defaults to the empty string) and <FONT FACE="courier, couriernew, monospaced size">dept</FONT> (whose value defaults to "general").</zsmartlist1>
</FONT>
<P><A NAME="1008399"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><FONT FACE="courier, couriernew, monospaced size">Manager</FONT> is based on <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>. It adds the <FONT FACE="courier, couriernew, monospaced size">reports</FONT> property (whose value defaults to an empty array, intended to have an array of <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> objects as its value).</zsmartlist1>
</FONT>
<P><A NAME="1008400"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> is also based on <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>. It adds the <FONT FACE="courier, couriernew, monospaced size">projects</FONT> property (whose value defaults to an empty array, intended to have an array of strings as its value).</zsmartlist1>
</FONT>
<P><A NAME="1008401"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><FONT FACE="courier, couriernew, monospaced size">SalesPerson</FONT> is based on <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT>. It adds the <FONT FACE="courier, couriernew, monospaced size">quota</FONT> property (whose value defaults to 100). It also overrides the <FONT FACE="courier, couriernew, monospaced size">dept</FONT> property with the value "sales", indicating that all salespersons are in the same department.</zsmartlist1>
</FONT>
<P><A NAME="1008402"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li></B>
<zsmartlist1><FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> is based on <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT>. It adds the <FONT FACE="courier, couriernew, monospaced size">machine</FONT> property (whose value defaults to the empty string) and also overrides the <FONT FACE="courier, couriernew, monospaced size">dept</FONT> property with the value "engineering".</zsmartlist1>
</FONT>
<P></ul>

<BR>
<BR>

<A NAME="1008404"> </A>
<A NAME="Creating the Hierarchy"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead1>Creating the Hierarchy</zhead1>
<HR SIZE="2" NOSHADE>
</FONT>
<BR>


<A NAME="1011527"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>There are several ways to define appropriate constructor functions to implement the Employee hierarchy. How you choose to define them depends largely on what you want to be able to do in your application.</zparagraph>
</FONT>
<P>

<A NAME="1011528"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>This section shows how to use very simple (and comparatively inflexible) definitions to demonstrate how to get the inheritance to work. In these definitions, you cannot specify any property values when you create an object. The newly-created object simply gets the default values, which you can change at a later time. <A HREF="obj2.html#1008418"  >Figure 8.2</A> illustrates the hierarchy with these simple definitions.</zparagraph>
</FONT>
<P>

<A NAME="1008410"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>In a real application, you would probably define constructors that allow you to provide property values at object creation time (see <A HREF="obj2.html#1008499"  >More Flexible Constructors</A> for information). For now, these simple definitions demonstrate how the inheritance occurs.</zparagraph>
</FONT>
<P>

<A NAME="1008418"> </A>
<ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<zfigurecaptionp>Figure 8.2	&nbsp&nbsp The Employee object definitions<p><img src="graphics/hier02.gif"></zfigurecaptionp>
</B>
</FONT>
<P>
<A NAME="1008419"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The following Java and JavaScript <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> definitions are similar. The only differences are that you need to specify the type for each property in Java but not in JavaScript, and you need to create an explicit constructor method for the Java class.</zparagraph>
</FONT>
<P>

<P>
<A NAME="1010246"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<BR>
<P>
<TABLE WIDTH="90%" BORDER="1" CELLPADDING="5" CELLSPACING="0">
  <CAPTION></CAPTION><P><FONT FACE=""><B></B></FONT>
<BR>
<BR>
  <TR BGCOLOR="#CCCCCC" ALIGN=LEFT VALIGN=TOP>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008422"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>JavaScript</ztablehead>
</B>
</FONT>
</TH>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008424"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>Java</ztablehead>
</B>
</FONT>
</TH>
  </DIV></TR>
  <TR>
    <TD VALIGN=TOP><A NAME="1008426"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Employee () {<br>
    this.name = "";<br>
    this.dept = "general";<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
    <TD VALIGN=TOP><A NAME="1008428"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class Employee {<br>
&nbsp;&nbsp;&nbsp;public String name;<br>
&nbsp;&nbsp;&nbsp;public String dept;<br>
&nbsp;&nbsp;&nbsp;public Employee () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.name = "";<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dept = "general";<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
  </TR>
</TABLE>



<P>
</FONT>
<P>


<A NAME="1008429"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The <FONT FACE="courier, couriernew, monospaced size">Manager</FONT> and WorkerBee definitions show the difference in how to specify the next object higher in the inheritance chain. In JavaScript, you add a prototypical instance as the value of the <FONT FACE="courier, couriernew, monospaced size">prototype</FONT> property of the constructor function. You can do so at any time after you define the constructor. In Java, you specify the superclass within the class definition. You cannot change the superclass outside the class definition.</zparagraph>
</FONT>
<P>

<P>
<A NAME="1010266"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<BR>
<P>
<TABLE WIDTH="90%" BORDER="1" CELLPADDING="5" CELLSPACING="0">
  <CAPTION></CAPTION><P><FONT FACE=""><B></B></FONT>
<BR>
<BR>
  <TR BGCOLOR="#CCCCCC" ALIGN=LEFT VALIGN=TOP>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008432"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>JavaScript</ztablehead>
</B>
</FONT>
</TH>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008434"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>Java</ztablehead>
</B>
</FONT>
</TH>
  </DIV></TR>
  <TR>
    <TD VALIGN=TOP><A NAME="1008436"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Manager () {<br>
    this.reports = [];<br>
}<br>
Manager.prototype = new Employee;
</zcodeline>
</FONT>
<P><A NAME="1008437"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function WorkerBee () {<br>
    this.projects = [];<br>
}<br>
WorkerBee.prototype = new Employee;
</zcodeline>
</FONT>
<P>&nbsp;</TD>
    <TD VALIGN=TOP><A NAME="1008439"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class Manager extends Employee {<br>
&nbsp;&nbsp;&nbsp;public Employee[] reports;<br>
&nbsp;&nbsp;&nbsp;public Manager () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.reports = new Employee[0];<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P><A NAME="1008440"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class WorkerBee extends Employee {<br>
&nbsp;&nbsp;&nbsp;public String[] projects;<br>
&nbsp;&nbsp;&nbsp;public WorkerBee () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.projects = new String[0];<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
  </TR>
</TABLE>



<P>
</FONT>
<P>


<A NAME="1008441"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> and <FONT FACE="courier, couriernew, monospaced size">SalesPerson</FONT> definitions create objects that descend from <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> and hence from <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>. An object of these types has properties of all the objects above it in the chain. In addition, these definitions override the inherited value of the <FONT FACE="courier, couriernew, monospaced size">dept</FONT> property with new values specific to these objects.</zparagraph>
</FONT>
<P>

<P>
<A NAME="1010284"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<BR>
<P>
<TABLE WIDTH="90%" BORDER="1" CELLPADDING="5" CELLSPACING="0">
  <CAPTION></CAPTION><P><FONT FACE=""><B></B></FONT>
<BR>
<BR>
  <TR BGCOLOR="#CCCCCC" ALIGN=LEFT VALIGN=TOP>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008444"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>JavaScript</ztablehead>
</B>
</FONT>
</TH>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008446"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>Java</ztablehead>
</B>
</FONT>
</TH>
  </DIV></TR>
  <TR>
    <TD VALIGN=TOP><A NAME="1008448"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function SalesPerson () {<br>
&nbsp;&nbsp;&nbsp;this.dept = "sales";<br>
&nbsp;&nbsp;&nbsp;this.quota = 100;<br>
}<br>
SalesPerson.prototype = new WorkerBee;
</zcodeline>
</FONT>
<P><A NAME="1008449"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Engineer () {<br>
&nbsp;&nbsp;&nbsp;this.dept = "engineering";<br>
&nbsp;&nbsp;&nbsp;this.machine = "";<br>
}<br>
Engineer.prototype = new WorkerBee;
</zcodeline>
</FONT>
<P>&nbsp;</TD>
    <TD VALIGN=TOP><A NAME="1008451"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class SalesPerson extends WorkerBee 
{<br>
&nbsp;&nbsp;&nbsp;public double quota;<br>
&nbsp;&nbsp;&nbsp;public SalesPerson () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dept = "sales";<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.quota = 100.0;<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P><A NAME="1008452"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class Engineer extends WorkerBee {<br>
&nbsp;&nbsp;&nbsp;public String machine;<br>
&nbsp;&nbsp;&nbsp;public Engineer () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dept = "engineering";<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.machine = "";<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
  </TR>
</TABLE>



<P>
</FONT>
<P>


<A NAME="1008453"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Using these definitions, you can create instances of these objects that get the default values for their properties. <A HREF="obj2.html#1008463"  >Figure 8.3</A> illustrates using these JavaScript definitions to create new objects and shows the property values for the new objects.</zparagraph>
</FONT>
<P>

<A NAME="1008457"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<znote>Note</znote>
</B>
</FONT>


<A NAME="1010709"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The term <I>instance</I> has a specific technical meaning in class-based languages. In these languages, an instance is an individual member of a class and is fundamentally different from a class. In JavaScript, "instance" does not have this technical meaning because JavaScript does not have this difference between classes and instances. However, in talking about JavaScript, "instance" can be used informally to mean an object created using a particular constructor function. So, in this example, you could informally say that <FONT FACE="courier, couriernew, monospaced size">jane</FONT> is an instance of <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT>. Similarly, although the terms <I>parent</I>, <I>child</I>, <I>ancestor</I>, and <I>descendant</I> do not have formal meanings in JavaScript; you can use them informally to refer to objects higher or lower in the prototype chain.</zparagraph>
</FONT>
<P>

<A NAME="1008463"> </A>
<ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<zfigurecaptionp>Figure 8.3	&nbsp&nbsp Creating objects with simple definitions<p><img src="graphics/hier03.gif"></zfigurecaptionp>
</B>
</FONT>
<P>
<BR>
<BR>

<A NAME="1008465"> </A>
<A NAME="Object Properties"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead1>Object Properties</zhead1>
<HR SIZE="2" NOSHADE>
</FONT>
<BR>


<A NAME="1012333"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>This section discusses how objects inherit properties from other objects in the prototype chain and what happens when you add a property at run time.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1008468"> </A>
<A NAME="Inheriting Properties"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Inheriting Properties</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008472"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Suppose you create the <FONT FACE="courier, couriernew, monospaced size">mark</FONT> object as a <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> as shown in <A HREF="obj2.html#1008463"  >Figure 8.3</A> with the following statement:</zparagraph>
</FONT>
<P>
<A NAME="1008473"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>mark = new WorkerBee;
</zcodeline>
</FONT>
<P>
<A NAME="1008474"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>When JavaScript sees the <FONT FACE="courier, couriernew, monospaced size">new</FONT> operator, it creates a new generic object and passes this new object as the value of the <FONT FACE="courier, couriernew, monospaced size">this</FONT> keyword to the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> constructor function. The constructor function explicitly sets the value of the <FONT FACE="courier, couriernew, monospaced size">projects</FONT> property. It also sets the value of the internal <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> property to the value of <FONT FACE="courier, couriernew, monospaced size">WorkerBee.prototype</FONT>. (That property name has two underscore characters at the front and two at the end.) The <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> property determines the prototype chain used to return property values. Once these properties are set, JavaScript returns the new object and the assignment statement sets the variable <FONT FACE="courier, couriernew, monospaced size">mark</FONT> to that object.</zparagraph>
</FONT>
<P>

<A NAME="1008475"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>This process does not explicitly put values in the <FONT FACE="courier, couriernew, monospaced size">mark</FONT> object (<I>local</I> values) for the properties <FONT FACE="courier, couriernew, monospaced size">mark</FONT> inherits from the prototype chain. When you ask for the value of a property, JavaScript first checks to see if the value exists in that object. If it does, that value is returned. If the value is not there locally, JavaScript checks the prototype chain (using the <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> property). If an object in the prototype chain has a value for the property, that value is returned. If no such property is found, JavaScript says the object does not have the property. In this way, the <FONT FACE="courier, couriernew, monospaced size">mark</FONT> object has the following properties and values:</zparagraph>
</FONT>
<P>
<A NAME="1008476"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>mark.name = "";<br>
mark.dept = "general";<br>
mark.projects = [];
</zcodeline>
</FONT>
<P>
<A NAME="1008477"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The <FONT FACE="courier, couriernew, monospaced size">mark</FONT> object inherits values for the <FONT FACE="courier, couriernew, monospaced size">name</FONT> and <FONT FACE="courier, couriernew, monospaced size">dept</FONT> properties from the prototypical object in <FONT FACE="courier, couriernew, monospaced size">mark.__proto__</FONT>. It is assigned a local value for the <FONT FACE="courier, couriernew, monospaced size">projects</FONT> property by the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> constructor. This gives you inheritance of properties and their values in JavaScript. Some subtleties of this process are discussed in <A HREF="obj2.html#1008567"  >Property Inheritance Revisited</A>.</zparagraph>
</FONT>
<P>

<A NAME="1008481"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Because these constructors do not let you supply instance-specific values, this information is generic. The property values are the default ones shared by all new objects created from <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT>. You can, of course, change the values of any of these properties. So, you could give specific information for <FONT FACE="courier, couriernew, monospaced size">mark</FONT> as follows:</zparagraph>
</FONT>
<P>
<A NAME="1008482"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>mark.name = "Doe, Mark";<br>
mark.dept = "admin";<br>
mark.projects = ["navigator"];
</zcodeline>
</FONT>
<P><P>
<BR>
<A NAME="1008483"> </A>
<A NAME="Adding Properties"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Adding Properties</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1012393"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>In JavaScript, you can add properties to any object at run time. You are not constrained to use only the properties provided by the constructor function. To add a property that is specific to a single object, you assign a value to the object, as follows:</zparagraph>
</FONT>
<P>
<A NAME="1008485"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>mark.bonus = 3000;
</zcodeline>
</FONT>
<P>
<A NAME="1008486"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Now, the <FONT FACE="courier, couriernew, monospaced size">mark</FONT> object has a <FONT FACE="courier, couriernew, monospaced size">bonus</FONT> property, but no other <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> has this property.</zparagraph>
</FONT>
<P>

<A NAME="1008487"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. For example, you can add a <FONT FACE="courier, couriernew, monospaced size">specialty</FONT> property to all employees with the following statement:</zparagraph>
</FONT>
<P>
<A NAME="1008488"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>Employee.prototype.specialty = "none";
</zcodeline>
</FONT>
<P>
<A NAME="1008489"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>As soon as JavaScript executes this statement, the <FONT FACE="courier, couriernew, monospaced size">mark</FONT> object also has the <FONT FACE="courier, couriernew, monospaced size">specialty</FONT> property with the value of <FONT FACE="courier, couriernew, monospaced size">"none"</FONT>. The following figure shows the effect of adding this property to the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> prototype and then overriding it for the <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> prototype.</zparagraph>
</FONT>
<P>

<A NAME="1008497"> </A>
<ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<zfigurecaptionp>Figure 8.4	&nbsp&nbsp Adding properties<p><img src="graphics/hier04.gif"></zfigurecaptionp>
</B>
</FONT>
<P>
<BR>
<BR>

<A NAME="1008499"> </A>
<A NAME="More Flexible Constructors"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead1>More Flexible Constructors</zhead1>
<HR SIZE="2" NOSHADE>
</FONT>
<BR>


<A NAME="1008500"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.</zparagraph>
</FONT>
<P>

<A NAME="1008508"> </A>
<ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<zfigurecaptionp>Figure 8.5	&nbsp&nbsp Specifying properties in a constructor, take 1<p><img src="graphics/hier05.gif"></zfigurecaptionp>
</B>
</FONT>
<P>
<A NAME="1008526"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The following table shows the Java and JavaScript definitions for these objects.</zparagraph>
</FONT>
<P>

<P>
<A NAME="1010297"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<BR>
<P>
<TABLE WIDTH="90%" BORDER="1" CELLPADDING="5" CELLSPACING="0">
  <CAPTION></CAPTION><P><FONT FACE=""><B></B></FONT>
<BR>
<BR>
  <TR BGCOLOR="#CCCCCC" ALIGN=LEFT VALIGN=TOP>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008511"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>JavaScript</ztablehead>
</B>
</FONT>
</TH>
    <TH VALIGN=TOP ALIGN=LEFT><A NAME="1008513"> </A>
<P ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<ztablehead>Java </ztablehead>
</B>
</FONT>
</TH>
  </DIV></TR>
  <TR>
    <TD VALIGN=TOP><A NAME="1008515"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Employee (name, dept) {<br>
    this.name = name || "";<br>
    this.dept = dept || "general";<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
    <TD VALIGN=TOP><A NAME="1008517"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class Employee {<br>
&nbsp;&nbsp;&nbsp;public String name;<br>
&nbsp;&nbsp;&nbsp;public String dept;<br>
&nbsp;&nbsp;&nbsp;public Employee () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this("", "general");<br>
&nbsp;&nbsp;&nbsp;}<br>
&nbsp;&nbsp;&nbsp;public Employee (name) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this(name, "general");<br>
&nbsp;&nbsp;&nbsp;}<br>
&nbsp;&nbsp;&nbsp;public Employee (name, dept) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.name = name;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dept = dept;<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
  </TR>
  <TR>
    <TD VALIGN=TOP><A NAME="1008519"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function WorkerBee (projs) {<br>
    this.projects = projs || [];<br>
}<br>
WorkerBee.prototype = new Employee;
</zcodeline>
</FONT>
<P>&nbsp;</TD>
    <TD VALIGN=TOP><A NAME="1008521"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class WorkerBee extends Employee {<br>
&nbsp;&nbsp;&nbsp;public String[] projects;<br>
&nbsp;&nbsp;&nbsp;public WorkerBee () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this(new String[0]);<br>
&nbsp;&nbsp;&nbsp;}<br>
&nbsp;&nbsp;&nbsp;public WorkerBee (String[] projs) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.projects = projs;<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
  </TR>
  <TR>
    <TD VALIGN=TOP><A NAME="1008523"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Engineer (mach) {<br>
&nbsp;&nbsp;&nbsp;this.dept = "engineering";<br>
&nbsp;&nbsp;&nbsp;this.machine = mach || "";<br>
}<br>
Engineer.prototype = new WorkerBee;
</zcodeline>
</FONT>
<P>&nbsp;</TD>
    <TD VALIGN=TOP><A NAME="1008525"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>public class Engineer extends WorkerBee {<br>
&nbsp;&nbsp;&nbsp;public String machine;<br>
&nbsp;&nbsp;&nbsp;public WorkerBee () {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dept = "engineering";<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.machine = "";<br>
&nbsp;&nbsp;&nbsp;}<br>
&nbsp;&nbsp;&nbsp;public WorkerBee (mach) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dept = "engineering";<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.machine = mach;<br>
&nbsp;&nbsp;&nbsp;}<br>
}
</zcodeline>
</FONT>
<P>&nbsp;</TD>
  </TR>
</TABLE>



<P>
</FONT>
<P>


<A NAME="1008527"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>These JavaScript definitions use a special idiom for setting default values:</zparagraph>
</FONT>
<P>
<A NAME="1008528"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>this.name = name || "";
</zcodeline>
</FONT>
<P>
<A NAME="1008529"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The JavaScript logical OR operator (<FONT FACE="courier, couriernew, monospaced size">||</FONT>) evaluates its first argument. If that argument converts to true, the operator returns it. Otherwise, the operator returns the value of the second argument. Therefore, this line of code tests to see if <FONT FACE="courier, couriernew, monospaced size">name</FONT> has a useful value for the <FONT FACE="courier, couriernew, monospaced size">name</FONT> property. If it does, it sets <FONT FACE="courier, couriernew, monospaced size">this.name</FONT> to that value. Otherwise, it sets <FONT FACE="courier, couriernew, monospaced size">this.name</FONT> to the empty string. This chapter uses this idiom for brevity; however, it can be puzzling at first glance.</zparagraph>
</FONT>
<P>

<A NAME="1008530"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>With these definitions, when you create an instance of an object, you can specify values for the locally defined properties. As shown in <A HREF="obj2.html#1008508"  >Figure 8.5</A>, you can use the following statement to create a new <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT>:</zparagraph>
</FONT>
<P>
<A NAME="1008534"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>jane = new Engineer("belau");
</zcodeline>
</FONT>
<P>
<A NAME="1008535"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Jane's properties are now:</zparagraph>
</FONT>
<P>
<A NAME="1008536"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>jane.name == "";<br>
jane.dept == "general";<br>
jane.projects == [];<br>
jane.machine == "belau"
</zcodeline>
</FONT>
<P>
<A NAME="1008537"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Notice that with these definitions, you cannot specify an initial value for an inherited property such as <FONT FACE="courier, couriernew, monospaced size">name</FONT>. If you want to specify an initial value for inherited properties in JavaScript, you need to add more code to the constructor function.</zparagraph>
</FONT>
<P>

<A NAME="1008538"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.</zparagraph>
</FONT>
<P>

<A NAME="1008546"> </A>
<ALIGN="LEFT">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>
<zfigurecaptionp>Figure 8.6	&nbsp&nbsp Specifying properties in a constructor, take 2 <p><img src="graphics/hier06.gif"></zfigurecaptionp>
</B>
</FONT>
<P>
<A NAME="1008547"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Let's look at one of these definitions in detail. Here's the new definition for the <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> constructor:</zparagraph>
</FONT>
<P>
<A NAME="1008548"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Engineer (name, projs, mach) {<br>
    this.base = WorkerBee;<br>
    this.base(name, "engineering", projs);<br>
    this.machine = mach || "";<br>
}
</zcodeline>
</FONT>
<P>
<A NAME="1008549"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Suppose you create a new <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> object as follows:</zparagraph>
</FONT>
<P>
<A NAME="1008550"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
</zcodeline>
</FONT>
<P>
<A NAME="1008551"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>JavaScript follows these steps:</zparagraph>
</FONT>
<P>
<ol type="1">
<A NAME="1008552"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="1"></B>
<zsmartlist1>The <FONT FACE="courier, couriernew, monospaced size">new</FONT> operator creates a generic object and sets its <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> property to <FONT FACE="courier, couriernew, monospaced size">Engineer.prototype</FONT>.</zsmartlist1>
</FONT>
<P><A NAME="1008553"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="2"></B>
<zsmartlist1>The <FONT FACE="courier, couriernew, monospaced size">new</FONT> operator passes the new object to the <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> constructor as the value of the <FONT FACE="courier, couriernew, monospaced size">this</FONT> keyword.</zsmartlist1>
</FONT>
<P><A NAME="1008554"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="3"></B>
<zsmartlist1>The constructor creates a new property called <FONT FACE="courier, couriernew, monospaced size">base</FONT> for that object and assigns the value of the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> constructor to the <FONT FACE="courier, couriernew, monospaced size">base</FONT> property. This makes the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> constructor a method of the <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> object.</zsmartlist1>
</FONT>
<P>  <dl>
     <DT> <A NAME="1008556"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<zparaindent1>The name of the <FONT FACE="courier, couriernew, monospaced size">base</FONT> property is not special. You can use any legal property name; <FONT FACE="courier, couriernew, monospaced size">base</FONT> is simply evocative of its purpose.</zparaindent1>
</FONT>
<P>  </dl>
<A NAME="1008557"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="4"></B>
<zsmartlist1>The constructor calls the <FONT FACE="courier, couriernew, monospaced size">base</FONT> method, passing as its arguments two of the arguments passed to the constructor (<FONT FACE="courier, couriernew, monospaced size">"Doe, Jane"</FONT> and <FONT FACE="courier, couriernew, monospaced size">["navigator", "javascript"]</FONT>) and also the string "engineering". Explicitly using "engineering" in the constructor indicates that all <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> objects have the same value for the inherited <FONT FACE="courier, couriernew, monospaced size">dept</FONT> property, and this value overrides the value inherited from <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>.</zsmartlist1>
</FONT>
<P><A NAME="1008558"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="5"></B>
<zsmartlist1>Because <FONT FACE="courier, couriernew, monospaced size">base</FONT> is a method of <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT>, within the call to <FONT FACE="courier, couriernew, monospaced size">base</FONT>, JavaScript binds the <FONT FACE="courier, couriernew, monospaced size">this</FONT> keyword to the object created in <A HREF="obj2.html#1008552"  >Step 1</A>. Thus, the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> function in turn passes the <FONT FACE="courier, couriernew, monospaced size">"Doe, Jane"</FONT> and <FONT FACE="courier, couriernew, monospaced size">["navigator", "javascript"]</FONT> arguments to the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> constructor function. Upon return from the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> constructor function, the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> function uses the remaining argument to set the <FONT FACE="courier, couriernew, monospaced size">projects</FONT> property.</zsmartlist1>
</FONT>
<P><A NAME="1008559"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="6"></B>
<zsmartlist1>Upon return from the <FONT FACE="courier, couriernew, monospaced size">base</FONT> method, the <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> constructor initializes the object's <FONT FACE="courier, couriernew, monospaced size">machine</FONT> property to <FONT FACE="courier, couriernew, monospaced size">"belau"</FONT>.</zsmartlist1>
</FONT>
<P><A NAME="1008560"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="7"></B>
<zsmartlist1>Upon return from the constructor, JavaScript assigns the new object to the <FONT FACE="courier, couriernew, monospaced size">jane</FONT> variable.</zsmartlist1>
</FONT>
<P></ol>

<A NAME="1008561"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>You might think that, having called the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> constructor from inside the <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> constructor, you have set up inheritance appropriately for <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> objects. This is not the case. Calling the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> constructor ensures that an <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> object starts out with the properties specified in all constructor functions that are called. However, if you later add properties to the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> or <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> prototypes, those properties are not inherited by the <FONT FACE="courier, couriernew, monospaced size">Engineer</FONT> object. For example, assume you have the following statements:</zparagraph>
</FONT>
<P>
<A NAME="1008562"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Engineer (name, projs, mach) {<br>
    this.base = WorkerBee;<br>
    this.base(name, "engineering", projs);<br>
    this.machine = mach || "";<br>
}<br>
jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");<br>
Employee.prototype.specialty = "none";
</zcodeline>
</FONT>
<P>
<A NAME="1008563"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The <FONT FACE="courier, couriernew, monospaced size">jane</FONT> object does not inherit the <FONT FACE="courier, couriernew, monospaced size">specialty</FONT> property. You still need to explicitly set up the prototype to ensure dynamic inheritance. Assume instead you have these statements:</zparagraph>
</FONT>
<P>
<A NAME="1008564"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Engineer (name, projs, mach) {<br>
    this.base = WorkerBee;<br>
    this.base(name, "engineering", projs);<br>
    this.machine = mach || "";<br>
}<br>
Engineer.prototype = new WorkerBee;<br>
jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");<br>
Employee.prototype.specialty = "none";
</zcodeline>
</FONT>
<P>
<A NAME="1008565"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Now the value of the <FONT FACE="courier, couriernew, monospaced size">jane</FONT> object's <FONT FACE="courier, couriernew, monospaced size">specialty</FONT> property is "none".</zparagraph>
</FONT>
<P>

<BR>
<BR>

<A NAME="1008567"> </A>
<A NAME="Property Inheritance Revisited"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead1>Property Inheritance Revisited</zhead1>
<HR SIZE="2" NOSHADE>
</FONT>
<BR>


<A NAME="1008568"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The preceding sections described how JavaScript constructors and prototypes provide hierarchies and inheritance. This section discusses some subtleties that were not necessarily apparent in the earlier discussions.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1008570"> </A>
<A NAME="Local versus Inherited Values"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Local versus Inherited Values</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008571"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>When you access an object property, JavaScript performs these steps, as described earlier in this chapter:</zparagraph>
</FONT>
<P>
<ol type="1">
<A NAME="1008572"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="1"></B>
<zsmartlist1>Check to see if the value exists locally. If it does, return that value.</zsmartlist1>
</FONT>
<P><A NAME="1008573"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="2"></B>
<zsmartlist1>If there is not a local value, check the prototype chain (using the <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> property).</zsmartlist1>
</FONT>
<P><A NAME="1008574"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="3"></B>
<zsmartlist1>If an object in the prototype chain has a value for the specified property, return that value.</zsmartlist1>
</FONT>
<P><A NAME="1008575"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2">
<B>  <li value="4"></B>
<zsmartlist1>If no such property is found, the object does not have the property.</zsmartlist1>
</FONT>
<P></ol>

<A NAME="1008576"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The outcome of these steps depends on how you define things along the way. The original example had these definitions:</zparagraph>
</FONT>
<P>
<A NAME="1008577"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Employee () {<br>
    this.name = "";<br>
    this.dept = "general";<br>
}
</zcodeline>
</FONT>
<P><A NAME="1008578"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function WorkerBee () {<br>
    this.projects = [];<br>
}<br>
WorkerBee.prototype = new Employee;
</zcodeline>
</FONT>
<P>
<A NAME="1008579"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>With these definitions, suppose you create <FONT FACE="courier, couriernew, monospaced size">amy</FONT> as an instance of <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> with the following statement:</zparagraph>
</FONT>
<P>
<A NAME="1008580"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>amy = new WorkerBee;
</zcodeline>
</FONT>
<P>
<A NAME="1008581"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The <FONT FACE="courier, couriernew, monospaced size">amy</FONT> object has one local property, <FONT FACE="courier, couriernew, monospaced size">projects</FONT>. The values for the <FONT FACE="courier, couriernew, monospaced size">name</FONT> and <FONT FACE="courier, couriernew, monospaced size">dept</FONT> properties are not local to <FONT FACE="courier, couriernew, monospaced size">amy</FONT> and so are gotten from the <FONT FACE="courier, couriernew, monospaced size">amy</FONT> object's <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> property. Thus, <FONT FACE="courier, couriernew, monospaced size">amy</FONT> has these property values:</zparagraph>
</FONT>
<P>
<A NAME="1008582"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>amy.name == "";<br>
amy.dept = "general";<br>
amy.projects == [];
</zcodeline>
</FONT>
<P>
<A NAME="1008583"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Now suppose you change the value of the <FONT FACE="courier, couriernew, monospaced size">name</FONT> property in the prototype associated with <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>:</zparagraph>
</FONT>
<P>
<A NAME="1008584"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>Employee.prototype.name = "Unknown"
</zcodeline>
</FONT>
<P>
<A NAME="1008585"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>At first glance, you might expect that new value to propagate down to all the instances of <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>. However, it does not.</zparagraph>
</FONT>
<P>

<A NAME="1008586"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>When you create <I>any</I> instance of the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> object, that instance gets a local value for the <FONT FACE="courier, couriernew, monospaced size">name</FONT> property (the empty string). This means that when you set the <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> prototype by creating a new <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> object, <FONT FACE="courier, couriernew, monospaced size">WorkerBee.prototype</FONT> has a local value for the <FONT FACE="courier, couriernew, monospaced size">name</FONT> property. Therefore, when JavaScript looks up the <FONT FACE="courier, couriernew, monospaced size">name</FONT> property of the <FONT FACE="courier, couriernew, monospaced size">amy</FONT> object (an instance of <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT>), JavaScript finds the local value for that property in <FONT FACE="courier, couriernew, monospaced size">WorkerBee.prototype</FONT>. It therefore does not look farther up the chain to <FONT FACE="courier, couriernew, monospaced size">Employee.prototype</FONT>.</zparagraph>
</FONT>
<P>

<A NAME="1008587"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>If you want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype. For example, assume you change the preceding code to the following:</zparagraph>
</FONT>
<P>
<A NAME="1008588"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Employee () {<br>
&nbsp;&nbsp;&nbsp;this.dept = "general";<br>
}<br>
Employee.prototype.name = "";
</zcodeline>
</FONT>
<P><A NAME="1008589"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function WorkerBee () {<br>
    this.projects = [];<br>
}<br>
WorkerBee.prototype = new Employee;
</zcodeline>
</FONT>
<P><A NAME="1008590"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>amy = new WorkerBee;
</zcodeline>
</FONT>
<P><A NAME="1008591"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>Employee.prototype.name = "Unknown";
</zcodeline>
</FONT>
<P>
<A NAME="1008592"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>In this case, the <FONT FACE="courier, couriernew, monospaced size">name</FONT> property of <FONT FACE="courier, couriernew, monospaced size">amy</FONT> becomes "Unknown".</zparagraph>
</FONT>
<P>

<A NAME="1008593"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>As these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1008594"> </A>
<A NAME="Determining Instance Relationships"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Determining Instance Relationships</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008595"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>You may want to know what objects are in the prototype chain for an object, so that you can tell from what objects this object inherits properties. </zparagraph>
</FONT>
<P>

<A NAME="1014360"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Starting with JavaScript 1.4, JavaScript provides an <FONT FACE="courier, couriernew, monospaced size">instanceof</FONT> operator to test the protoytpe chain. This operator works exactly like the <FONT FACE="courier, couriernew, monospaced size">instanceof</FONT> function discussed below.</zparagraph>
</FONT>
<P>

<A NAME="1008599"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>As discussed in <A HREF="obj2.html#1008468"  >Inheriting Properties</A>, when you use the <FONT FACE="courier, couriernew, monospaced size">new</FONT> operator with a constructor function to create a new object, JavaScript sets the <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> property of the new object to the value of the <FONT FACE="courier, couriernew, monospaced size">prototype</FONT> property of the constructor function. You can use this to test the prototype chain.</zparagraph>
</FONT>
<P>

<A NAME="1008600"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>For example, suppose you have the same set of definitions already shown, with the prototypes set appropriately. Create a <FONT FACE="courier, couriernew, monospaced size">__proto__</FONT> object as follows:</zparagraph>
</FONT>
<P>
<A NAME="1008601"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
</zcodeline>
</FONT>
<P>
<A NAME="1008602"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>With this object, the following statements are all true:</zparagraph>
</FONT>
<P>
<A NAME="1008603"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>chris.__proto__ == Engineer.prototype;<br>
chris.__proto__.__proto__ == WorkerBee.prototype;<br>
chris.__proto__.__proto__.__proto__ == Employee.prototype;<br>
chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;<br>
chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
</zcodeline>
</FONT>
<P>
<A NAME="1008604"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Given this, you could write an <FONT FACE="courier, couriernew, monospaced size">instanceOf</FONT> function as follows:</zparagraph>
</FONT>
<P>
<A NAME="1008605"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function instanceOf(object, constructor) { <br>
&nbsp;&nbsp;&nbsp;while (object != null) { <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (object == constructor.prototype) <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true; <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;object = object.__proto__; <br>
&nbsp;&nbsp;&nbsp;} <br>
&nbsp;&nbsp;&nbsp;return false; <br>
}
</zcodeline>
</FONT>
<P>
<A NAME="1008606"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>With this definition, the following expressions are all true:</zparagraph>
</FONT>
<P>
<A NAME="1008607"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>instanceOf (chris, Engineer)<br>
instanceOf (chris, WorkerBee)<br>
instanceOf (chris, Employee)<br>
instanceOf (chris, Object)
</zcodeline>
</FONT>
<P>
<A NAME="1008608"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>But the following expression is false:</zparagraph>
</FONT>
<P>
<A NAME="1008609"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>instanceOf (chris, SalesPerson)
</zcodeline>
</FONT>
<P><P>
<BR>
<A NAME="1008610"> </A>
<A NAME="Global Information in Constructors"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>Global Information in Constructors</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008611"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>When you create constructors, you need to be careful if you set global information in the constructor. For example, assume that you want a unique ID to be automatically assigned to each new employee. You could use the following definition for <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>:</zparagraph>
</FONT>
<P>
<A NAME="1008612"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>var idCounter = 1;
</zcodeline>
</FONT>
<P><A NAME="1008613"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Employee (name, dept) {<br>
&nbsp;&nbsp;&nbsp;this.name = name || "";<br>
&nbsp;&nbsp;&nbsp;this.dept = dept || "general";<br>
&nbsp;&nbsp;&nbsp;this.id = idCounter++;<br>
}
</zcodeline>
</FONT>
<P>
<A NAME="1008614"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>With this definition, when you create a new <FONT FACE="courier, couriernew, monospaced size">Employee</FONT>, the constructor assigns it the next ID in sequence and then increments the global ID counter. So, if your next statement is the following, <FONT FACE="courier, couriernew, monospaced size">victoria.id</FONT> is 1 and <FONT FACE="courier, couriernew, monospaced size">harry.id</FONT> is 2:</zparagraph>
</FONT>
<P>
<A NAME="1008615"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>victoria = new Employee("Pigbert, Victoria", "pubs")<br>
harry = new Employee("Tschopik, Harry", "sales")
</zcodeline>
</FONT>
<P>
<A NAME="1008616"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>At first glance that seems fine. However, <FONT FACE="courier, couriernew, monospaced size">idCounter</FONT> gets incremented every time an <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> object is created, for whatever purpose. If you create the entire <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> hierarchy shown in this chapter, the <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> constructor is called every time you set up a prototype. Suppose you have the following code:</zparagraph>
</FONT>
<P>
<A NAME="1008617"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>var idCounter = 1;
</zcodeline>
</FONT>
<P><A NAME="1008618"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Employee (name, dept) {<br>
&nbsp;&nbsp;&nbsp;this.name = name || "";<br>
&nbsp;&nbsp;&nbsp;this.dept = dept || "general";<br>
&nbsp;&nbsp;&nbsp;this.id = idCounter++;<br>
}
</zcodeline>
</FONT>
<P><A NAME="1008619"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Manager (name, dept, reports) {...}<br>
Manager.prototype = new Employee;
</zcodeline>
</FONT>
<P><A NAME="1008620"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function WorkerBee (name, dept, projs) {...}<br>
WorkerBee.prototype = new Employee;
</zcodeline>
</FONT>
<P><A NAME="1008621"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Engineer (name, projs, mach) {...}<br>
Engineer.prototype = new WorkerBee;
</zcodeline>
</FONT>
<P><A NAME="1008622"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function SalesPerson (name, projs, quota) {...}<br>
SalesPerson.prototype = new WorkerBee;
</zcodeline>
</FONT>
<P><A NAME="1008623"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>mac = new Engineer("Wood, Mac");
</zcodeline>
</FONT>
<P>
<A NAME="1008624"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Further assume that the definitions omitted here have the <FONT FACE="courier, couriernew, monospaced size">base</FONT> property and call the constructor above them in the prototype chain. In this case, by the time the <FONT FACE="courier, couriernew, monospaced size">mac</FONT> object is created, <FONT FACE="courier, couriernew, monospaced size">mac.id</FONT> is 5.</zparagraph>
</FONT>
<P>

<A NAME="1008625"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Depending on the application, it may or may not matter that the counter has been incremented these extra times. If you care about the exact value of this counter, one possible solution involves instead using the following constructor:</zparagraph>
</FONT>
<P>
<A NAME="1008626"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Employee (name, dept) {<br>
&nbsp;&nbsp;&nbsp;this.name = name || "";<br>
&nbsp;&nbsp;&nbsp;this.dept = dept || "general";<br>
&nbsp;&nbsp;&nbsp;if (name)<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.id = idCounter++;<br>
}
</zcodeline>
</FONT>
<P>
<A NAME="1008627"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>When you create an instance of <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> to use as a prototype, you do not supply arguments to the constructor. Using this definition of the constructor, when you do not supply arguments, the constructor does not assign a value to the id and does not update the counter. Therefore, for an <FONT FACE="courier, couriernew, monospaced size">Employee</FONT> to get an assigned id, you must specify a name for the employee. In this example, <FONT FACE="courier, couriernew, monospaced size">mac.id</FONT> would be 1.</zparagraph>
</FONT>
<P>
<P>
<BR>
<A NAME="1008628"> </A>
<A NAME="No Multiple Inheritance"> </A>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="4">
<zhead2>No Multiple Inheritance</zhead2>
</FONT>
<BR>
<BR>



<A NAME="1008629"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Some object-oriented languages allow multiple inheritance. That is, an object can inherit the properties and values from unrelated parent objects. JavaScript does not support multiple inheritance.</zparagraph>
</FONT>
<P>

<A NAME="1008630"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Inheritance of property values occurs at run time by JavaScript searching the prototype chain of an object to find a value. Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.</zparagraph>
</FONT>
<P>

<A NAME="1008631"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance. For example, consider the following statements:</zparagraph>
</FONT>
<P>
<A NAME="1008632"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Hobbyist (hobby) {<br>
&nbsp;&nbsp;&nbsp;this.hobby = hobby || "scuba";<br>
}
</zcodeline>
</FONT>
<P><A NAME="1008633"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>function Engineer (name, projs, mach, hobby) {<br>
&nbsp;&nbsp;&nbsp;this.base1 = WorkerBee;<br>
&nbsp;&nbsp;&nbsp;this.base1(name, "engineering", projs);<br>
&nbsp;&nbsp;&nbsp;this.base2 = Hobbyist;<br>
&nbsp;&nbsp;&nbsp;this.base2(hobby);<br>
&nbsp;&nbsp;&nbsp;this.machine = mach || "";<br>
}<br>
Engineer.prototype = new WorkerBee;
</zcodeline>
</FONT>
<P><A NAME="1008634"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
</zcodeline>
</FONT>
<P>
<A NAME="1008635"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>Further assume that the definition of <FONT FACE="courier, couriernew, monospaced size">WorkerBee</FONT> is as used earlier in this chapter. In this case, the dennis object has these properties:</zparagraph>
</FONT>
<P>
<A NAME="1008636"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>dennis.name == "Doe, Dennis"<br>
dennis.dept == "engineering"<br>
dennis.projects == ["collabra"]<br>
dennis.machine == "hugo"<br>
dennis.hobby == "scuba"
</zcodeline>
</FONT>
<P>
<A NAME="1008637"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>So <FONT FACE="courier, couriernew, monospaced size">dennis</FONT> does get the <FONT FACE="courier, couriernew, monospaced size">hobby</FONT> property from the <FONT FACE="courier, couriernew, monospaced size">Hobbyist</FONT> constructor. However, assume you then add a property to the <FONT FACE="courier, couriernew, monospaced size">Hobbyist</FONT> constructor's prototype:</zparagraph>
</FONT>
<P>
<A NAME="1008638"></A><FONT FACE="courier, couriernew, monospaced size" SIZE="2">
<zcodeline>Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
</zcodeline>
</FONT>
<P>
<A NAME="1008639"> </A><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2"><zparagraph>The <FONT FACE="courier, couriernew, monospaced size">dennis</FONT> object does not inherit this new property.</zparagraph>
</FONT>
<P>



   </BLOCKQUOTE>
</BOOKCONTENT>

<FOOTERCONTENT>
   <BLOCKQUOTE>
 <BR>
            <b><a href="obj.html">
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">Previous</a></FONT>&nbsp;&nbsp;&nbsp;&nbsp;</b>
<a href="contents.html">
<b><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">Contents</a></FONT></b>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="ix.html"><b><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">Index</a></FONT></b>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="partlc.html">
<b>
<FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#993300">
Next
</a>
</FONT>
</b>&nbsp;&nbsp;&nbsp;&nbsp;
        <HR NOSHADE SIZE="1">


   <font face="Arial, Helvetica, sans-serif" SIZE="1">

Copyright &#169; 2000 <a href="http://www.netscape.com">Netscape Communications Corp.</a> All rights reserved.</FONT>
   </BLOCKQUOTE>
   <FONT FACE="Arial, Helvetica, sans-serif" SIZE="1">
   <P ALIGN="RIGHT">Last Updated <B>September 28, 2000</B>
   </FONT>
   <BR>

</FOOTERCONTENT>

</MAINCONTENT>

</BODY>


</HTML>